<template>
	<view class="rank_detail">
		<view class="top" :style="'background:'+ bgColor">
			<view class="nav_bar">
				<view class="nav_bar_left">
					<image src="@/static/icons/arrow_down.png" class="nav_bar_back" @click="linkBack" />
					<view style="font-size:28rpx;" v-if="detailData.closed">休市中</view>
					<view style="font-size:28rpx;" v-else>已开市</view>
				</view>
				<view class="nav_bar_center">
					<view>◀</view>
					<view class="rank_title">
						<view style="display:flex;align-items:center;">
							<text class="flag" v-if="detailData.master">主</text>
							<!--  product_short_name-->
							<text class="name">{{detailData.name}}{{detailData.futuresDate}}</text>
						</view>
						<view>
							<text style="font-size:24rpx;color:#aaa" v-if="detailData.exchange_id==='CFFEX'">中金所</text>
							<text style="font-size:24rpx;color:#FFFFFF;margin-left:5rpx;">{{detailData.instrument_id}}</text>
						</view>
					</view>
					<view style="margin-left:20rpx;">▶</view>
				</view>
				<view class="nav_bar_right">
				</view>
			</view>
			<view class="introduce" @click="showPop = !showPop">
				<view class="intro_left">
					<view class="price">{{detailData.last_price}}</view>
					<view class="ratio">
						<text>{{detailData.dataNumber}}</text>
						<text style="margin-left:20rpx;" v-if="detailData.hlFlag==='1'">{{'+'+detailData.hl+'%'}}</text>
						<text style="margin-left:20rpx;"
							v-else-if="detailData.hlFlag==='0'">{{detailData.hl+'%'}}</text>
					</view>
				</view>
				<view class="intro_right">
					<view class='item'>
						<view class='title'>卖价</view>
						<view class='price'>{{detailData.ask_price1}}</view>
					</view>
					<view class='item'>
						<view class='title'>卖量</view>
						<view class='price'>{{detailData.ask_volume1}}</view>
					</view>
					<view class='item' style="margin-top:10rpx;">
						<view class='title'>买价</view>
						<view class='price'>{{detailData.bid_price1}}</view>
					</view>
					<view class='item' style="margin-top:10rpx;">
						<view class='title'>买量</view>
						<view class='price'>{{detailData.bid_volume1}}</view>
					</view>
				</view>
			</view>
			<view class="arrow_down" @click="showPop = !showPop">
				<image v-if="!showPop" src="@/static/icons/arrow_down.png" mode="aspectFill"
					style="width:24rpx;height:18rpx;"></image>
				<image v-else src="@/static/icons/arrow_up.png" mode="aspectFill"
					style="width:24rpx;height:18rpx;"></image>
			</view>
		</view>
		<view class="bottom">
			<view class="time_step">
				<u-tabs ref="tabs" :list="list" active-color="#3e8ef7" inactive-color="#9a9a9a" font-size="24"
					:current="current" :change:current="klinecharts.receiveMsg" @change="change"
					@click="klinecharts.emitData">
				</u-tabs>
				<view class="listcont">
					<view :current="current" :change:current="klinecharts.receiveMsg">
					</view>
				</view>
				<view class="chart_position">
					<!-- 分时 -->
					<view class="charts_content" :style="{'left':left}">
						<view class="wrap_view">
							<view class="wrap_left">
								<view class="wrap_top">
									<view class="qiun-Areacharts">
										<view id="k-line-chart" class="content">
										</view>
									</view>
								</view>
								<view class="wrap_bottom"></view>
							</view>
						</view>
					</view>
					<!-- 日k v-show="current===1"-->
					<view class="charts_content1" :style="{'left':left1}">
						<view id="technical-indicator-k-line" class="k-line-chart1"></view>
					</view>
					<!-- 60分 -->
					<view class="charts_content2" :style="{'left':left2}">
						<view id="technical-indicator-k-sixline" class="k-line-chart1"></view>
					</view>
					<!-- 30分 -->
					<view class="charts_content3" :style="{'left':left3}">
						<view id="technical-indicator-k-threeline" class="k-line-chart1"></view>
					</view>
					<!-- 15分 -->
					<view class="charts_content4" :style="{'left':left4}">
						<view id="technical-indicator-k-fiveline" class="k-line-chart1"></view>
					</view>
					<!-- 1分 -->
					<view class="charts_content5" :style="{'left':left5}">
						<view id="technical-indicator-k-oneline" class="k-line-chart1"></view>
					</view>
				</view>
				<view class="pop" v-if="showPop" @click="showPop=false">
					<view @click.stop="null">
						<view class="info_tt">
							<view class="info_item">开盘</view>
							<view class="info_item">最高</view>
							<view class="info_item">持仓量</view>
							<view class="info_item">昨结</view>
							<view class="info_item">涨停</view>
						</view>
						<view class="info_tt deep">
							<view class="info_item up">{{detailData.open}}</view>
							<view class="info_item up">{{detailData.highest}}</view>
							<view class="info_item">{{detailData.open_interest}}</view>
							<view class="info_item">{{detailData.pre_settlement}}</view>
							<view class="info_item up">{{detailData.upper_limit}}</view>
						</view>
						<view class="info_tt">
							<view class="info_item">成交量</view>
							<view class="info_item">最低</view>
							<view class="info_item">日增量</view>
							<view class="info_item">昨收</view>
							<view class="info_item">跌停</view>
						</view>
						<view class="info_tt deep">
							<view class="info_item">{{detailData.volume}}</view>
							<view class="info_item down">{{detailData.lowest}}</view>
							<view class="info_item">{{detailData.upper_limit}}</view>
							<view class="info_item">{{detailData.pre_close}}</view>
							<view class="info_item down">{{detailData.lower_limit}}</view>
						</view>
					</view>
				</view>
			</view>
			<view class="flexd_cont">
				<view class="cont_btn" @click="buyupFn(1,detailData.instrument_id)">
					<!-- <u-icon name="plus-people-fill"></u-icon> -->
					<image class="img" src="@/static/icons/zhang_yingli.png" mode=""></image>
					买涨
				</view>
				<view class="cont_btn" @click="buyupFn(2,detailData.instrument_id)">
					<!-- <u-icon name="minus-people-fill"></u-icon> -->
					<image class="img" src="@/static/icons/die_yingli.png" mode=""></image>
					买跌
				</view>
				<view class="cont_btn" @click="overFn(detailData.name,detailData.instrument_id)">
					<u-icon :name="this.add?'minus-circle':'plus-circle'"></u-icon>{{this.add?'取消':'自选'}}
				</view>
			</view>
		</view>

	</view>
</template>

<script>
	import {
		isJSON
	} from '@/common/checker.js';
	export default {
		data() {
			return {
				add: false,
				scrollTop: 99999999999,
				zdata: [],
				msg: '',
				left: '0px',
				left1: '375px',
				left2: '375px',
				left3: '375px',
				left4: '375px',
				left5: '375px',
				screenWidth: '', // 屏幕宽度
				// screenWidth:'',
				mainTechnicalIndicatorTypes: ['MA', 'EMA', 'SAR'],
				subTechnicalIndicatorTypes: ['VOL', 'MACD', 'KDJ'],
				// Kdata: '',
				detailData: null,
				active: 0,
				list: [{
						name: '分时'
					}, {
						name: '日k'
					}, {
						name: '60分'
					},
					{
						name: '30分'
					}, {
						name: '15分'
					},
					{
						name: '1分'
					}
				],
				current: 0,
				kLine: '分时',
				showPop: false,
				bgColor: '#03B016', //0 跌  1 涨  2平
				cWidth: '',
				cHeight: '',
				pixelRatio: 1,
				detailSocket: null,
				itemCount: 20, //x轴单屏数据密度
				sliderMax: 50,
				textarea: '',
				listData: [] //成交明细数据
			};
		},
		onLoad() {
			let detailData = getApp().globalData.rankDetail
			this.add = detailData.my
			this.zdata = detailData
			let num = (detailData.last_price - detailData.pre_settlement).toFixed(2)
			detailData.dataNumber = num > 0 ? '+' + num : num,
			detailData.closed = true
			let datetime = detailData.datetime
			let nowtime = new Date().getHours() + new Date().getMinutes() / 60
			if (nowtime >= 9 && nowtime <= 11.5 || nowtime >= 13.5 && nowtime <= 15 || nowtime >= 21 && nowtime <= 23) {
				detailData.closed = false
			} else {
				detailData.closed = true
			}
			this.detailData = detailData
			this.getWebsocketMsg()
			if (detailData.hlFlag && Number(detailData.hlFlag) === 1) {
				this.bgColor = '#CB1D14'
			}
		},
		mounted() {
			// window.addEventListener("onWebsocket", this.getWebsocketMsg)
			let _this = this
			uni.getSystemInfo({
				success: function(res) {
					_this.screenWidth = res.windowWidth
					_this.left1 = res.windowWidth + 'px'
					_this.left2 = res.windowWidth + 'px'
					_this.left3 = res.windowWidth + 'px'
					_this.left4 = res.windowWidth + 'px'
					_this.left5 = res.windowWidth + 'px'
					// uni.pageScrollTo({
					//     scrollTop: res.windowHeight+'px',
					// 	selector:'.uni-scroll-view-content',
					//     duration: 300
					// });
				}
			})
		},
		onShow() {
			// this.onclose()
		},
		onHide() {
			// this.onclose()
			// window.removeEventListener("onWebsocket", this.getWebsocketMsg)
		},
		onUnload() {
			// this.onclose()
		},
		methods: {
			buyupFn(index, id) {
				const userInfo = uni.getStorageSync('MEMBER_INFO')
				if ((userInfo && userInfo.id || getApp().globalData.islogin) && getApp().globalData.isAccount) {
					uni.navigateTo({
						url: '/pages/tabBar/transaction/trading/index?index=' + index + '&id=' + id
					})
				} else {
					if ((userInfo && userInfo.id || getApp().globalData.islogin) && !getApp().globalData.isAccount) {
						uni.navigateTo({
							url:'/pages/user/dealLogin/dealLogin'
						})
					} else {
						uni.navigateTo({
							url:'/pages/user/login/index'
						})
					}
				}
			},
			buyshortFn() {
                
			},
			// 触发逻辑层出入renderjs数据改变
			changeMsg() {
				// this.msg = 'hello renderjs' + Math.random() * 10;
				this.current = 5
			},
			// 接收renderjs发回的数据
			// receiveRenderData(val) {
			//   receiveRenderData: val;
			// }
			getWebsocketMsg() {
				let that = this
				// getApp().globalData.isHide=false
				// if(getApp().globalData.isHide){
				uni.onSocketMessage(function(res) {
					// getApp().globalData.isHide=false
					let arr = JSON.parse(res.data)
					if (arr) {
						if (arr.instrument_id === that.detailData.instrument_id) {
							arr.dataNumber=arr.last_price-arr.pre_settlement
							that.detailData = arr
							console.log(arr)
							// if(!getApp().globalData.isHide){
							// }else{

							// }
						}
					}
				});
				// }

			},
			linkBack() {
				uni.navigateBack()
			},
			overFn(i, y) {
				const userInfo = uni.getStorageSync('MEMBER_INFO')
				let {
					id
				} = userInfo
				if (id) {

					if (this.detailData.my) {
						uni.request({
							url: 'https://md.sou-liang.com/api/deleteFutures', //192.168.43.133    47.102.157.67
							data: {
								id: id,
								name: i
							},
							success: (res) => {
								if (res.statusCode == 200) {
									this.detailData.my = false
									this.add = false
									uni.showToast({
										title: res.data,
										icon: 'none'
									})
								}
							}
						})
					} else {
						if (this.detailData.name == '菜籽2107' || this.detailData.name == '菜粕2105' || this.detailData.name ==
							'鸡蛋2105' || this.detailData.name == '豆一2105' || this.detailData.name == '硅铁2105' || this
							.detailData.name == '豆粕2105') {
							uni.showToast({
								title: '该合约为默认自选',
								icon: 'none'
							})
						} else {
							uni.request({
								url: 'https://md.sou-liang.com/api/addFutures?id=' +
								id, //192.168.43.133    47.102.157.67
								data: JSON.stringify(this.detailData),
								method: 'POST',
								success: (res) => {
									if (res.statusCode == 200) {
										this.add = true
										this.detailData.my = true
										uni.showToast({
											title: res.data,
											icon: 'none'
										})
									}
								}
							})
						}

					}

				} else {
					uni.navigateTo({
						url: '/pages/user/login/index?user=1'
					})
				}

			},
			change(e) {
				this.current = e
				this.kLine = this.list[e].name
				if (e == 0) {
					// this.time = 5
					// this.left1=0
					this.left = 0
					this.left1 = this.screenWidth + 'px'
					this.left2 = this.screenWidth + 'px'
					this.left3 = this.screenWidth + 'px'
					this.left4 = this.screenWidth + 'px'
					this.left5 = this.screenWidth + 'px'
				} else if (e == 1) {
					this.left = this.screenWidth + 'px'
					this.left2 = this.screenWidth + 'px'
					this.left3 = this.screenWidth + 'px'
					this.left4 = this.screenWidth + 'px'
					this.left5 = this.screenWidth + 'px'
					this.left1 = 0
					// this.time = 60 * 60 * 24
				} else if (e == 2) {
					this.left = this.screenWidth + 'px'
					this.left2 = 0
					this.left3 = this.screenWidth + 'px'
					this.left4 = this.screenWidth + 'px'
					this.left5 = this.screenWidth + 'px'
					this.left1 = this.screenWidth + 'px'
					// this.time = 60 * 60
				} else if (e == 3) {
					this.left = this.screenWidth + 'px'
					this.left2 = this.screenWidth + 'px'
					this.left3 = 0
					this.left4 = this.screenWidth + 'px'
					this.left5 = this.screenWidth + 'px'
					this.left1 = this.screenWidth + 'px'
					// this.time = 60 * 30
				} else if (e == 4) {
					this.left = this.screenWidth + 'px'
					this.left2 = this.screenWidth + 'px'
					this.left3 = this.screenWidth + 'px'
					this.left4 = 0
					this.left5 = this.screenWidth + 'px'
					this.left1 = this.screenWidth + 'px'
					// this.time = 60 * 15
				} else {
					this.left = this.screenWidth + 'px'
					this.left2 = this.screenWidth + 'px'
					this.left3 = this.screenWidth + 'px'
					this.left4 = this.screenWidth + 'px'
					this.left5 = 0
					this.left1 = this.screenWidth + 'px'
					// this.time = 60
				}
			},
			onclose() {
				this.detailSocket.close({
					success: (res => {
						// k行关闭
					})
				})
			},

			changeActive(index) {
				this.active = index
			},
			getServerData1() {
				let Area = {
					categories: [],
					series: []
				};
				//这里我后台返回的是数组，所以用等于，如果您后台返回的是单条数据，需要push进去
				Area.categories = ["2012", "2013", "2014", "2015", "2016"];
				Area.series = [{
					name: '成交量',
					data: [100, 80, 95, 150, 112]
				}]
				_self.showArea("canvasArea", Area);
			},
			timestampToTime(cjsj) {
				var date = new Date(cjsj) //时间戳为10位需*1000，时间戳为13位的话不需乘1000
				var Y = date.getFullYear() + '-'
				var M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-'
				var D = date.getDate() + ' '
				var h = date.getHours() + ':'
				var m = date.getMinutes() + ':'
				var s = date.getSeconds()
				// return Y+M+D+h+m+s
				return ':' + s
			},
			receiveRenderData(val) {
				this.listData = val
			}
		}
	}
</script>
<script module="klinecharts" lang="renderjs">
	// import {
	// 	isJSON
	// } from '@/common/checker.js';
	// import Vue from 'vue'
	import {
		init,
		dispose
	} from 'klinecharts'
	import generatedKLineDataList from './generatedKLineDataList.js'

	function basicOptions(theme) {
		const textColor = '#76808F'
		const gridColor = '#ededed'
		const axisLineColor = '#DDDDDD'
		const crossLineColor = '#DDDDDD'
		const crossTextBackgroundColor = '#686d76'
		return {
			grid: {
				horizontal: {
					color: gridColor
				},
				vertical: {
					color: gridColor
				}
			},
			candle: {
				type: 'area', //类型
				bar: {
					upColor: '#26A69A',
					downColor: '#EF5350',
					noChangeColor: '#888888'
				},
				area: {
					lineSize: 2,
					lineColor: '#2196F3',
					value: 'close',
					fillColor: [{
						offset: 0,
						color: 'rgba(33, 150, 243, 0.01)'
					}, {
						offset: 1,
						color: 'rgba(33, 150, 243, 0.2)'
					}]
				},
				priceMark: {
					last: {
						upColor: '#EF5350',
						downColor: '#26A69A',
						noChangeColor: '#888888',
					},
					high: {
						color: textColor
					},
					low: {
						color: textColor
					}
				},
				tooltip: {
					showRule: 'none',
					showType: 'none',
					text: {
						color: textColor
					}
				}
			},
			technicalIndicator: {
				bar: {
					upColor: '#EF5350',
					downColor: '#26A69A',
					noChangeColor: '#888888'
				},
				tooltip: {
					text: {
						color: textColor
					}
				},
				circle: {
					upColor: '#EF5350',
					downColor: '#26A69A',
					noChangeColor: '#888888'
				},
			},
			xAxis: {
				axisLine: {
					color: axisLineColor
				},
				tickLine: {
					color: axisLineColor
				},
				tickText: {
					color: textColor
				}
			},
			yAxis: {
				axisLine: {
					color: axisLineColor
				},
				tickLine: {
					color: axisLineColor
				},
				tickText: {
					color: textColor
				}
			},
			separator: {
				color: axisLineColor
			},
			crosshair: {
				horizontal: {
					line: {
						color: crossLineColor
					},
					text: {
						backgroundColor: crossTextBackgroundColor
					}
				},
				vertical: {
					line: {
						color: crossLineColor
					},
					text: {
						backgroundColor: crossTextBackgroundColor
					}
				}
			}
		}
	}

	function getThemeOptions(theme) {
		const textColor = '#76808F'
		const gridColor = '#ededed'
		const axisLineColor = '#DDDDDD'
		const crossLineColor = '#DDDDDD'
		const crossTextBackgroundColor = '#686d76'
		return {
			grid: {
				horizontal: {
					color: gridColor
				},
				vertical: {
					color: gridColor
				}
			},
			candle: {
				type: 'candle_down_stroke',
				bar: {
					upColor: '#EF5350',
					downColor: '#26A69A',
					noChangeColor: '#888888'
				},
				priceMark: {
					high: {
						color: textColor
					},
					low: {
						color: textColor
					}
				},
				tooltip: {
					// showRule:'none',
					// showType:'none',
					abels: ['开', '收', '高', '低', '成交量'],
					text: {
						size: 8,
						color: textColor
					}
				}
			},
			technicalIndicator: {
				bar: {
					upColor: '#EF5350',
					downColor: '#26A69A',
					noChangeColor: '#888888'
				},
				tooltip: {
					text: {
						size: 8,
						color: textColor
					}
				}
			},
			xAxis: {
				axisLine: {
					color: axisLineColor
				},
				tickLine: {
					color: axisLineColor
				},
				tickText: {
					color: textColor
				}
			},
			yAxis: {
				inside: true,
				width: 60,
				position: 'left',
				axisLine: {
					color: axisLineColor
				},
				tickLine: {
					color: axisLineColor,
					paddingLeft: 30,
				},
				tickText: {
					color: textColor
				}
			},
			separator: {
				color: axisLineColor
			},
			crosshair: {
				horizontal: {
					line: {
						color: crossLineColor
					},
					text: {
						backgroundColor: crossTextBackgroundColor
					}
				},
				vertical: {
					line: {
						color: crossLineColor
					},
					text: {
						backgroundColor: crossTextBackgroundColor
					}
				}
			}
		}
	}
	const emojiTechnicalIndicator = {
		name: 'EMOJI',
		plots: [{
			key: 'emoji'
		}],
		calcTechnicalIndicator: (kLineDataList) => {
			const result = []
			kLineDataList.forEach(kLineData => {
				result.push({
					emoji: kLineData.close,
					text: fruits[Math.floor(Math.random() * 17)]
				})
			})
			return result
		},
		render: (ctx, {
			from,
			to,
			technicalIndicatorDataList
		}, {
			barSpace
		}, options, xAxis, yAxis) => {
			ctx.font = `${barSpace}px Helvetica Neue`
			ctx.textAlign = 'center'
			for (let i = from; i < to; i++) {
				const data = technicalIndicatorDataList[i]
				const x = xAxis.convertToPixel(i)
				const y = yAxis.convertToPixel(data.emoji)
				ctx.fillText(data.text, x, y)
			}
		}
	}

	export default {
		data() {
			return {
				// scrollTop:99999999999,
				type: 0,
				tag: 'more',
				// kLineChart: '',
				instrumentId: '',
				ws: '',
				beforeLength: 0,
				// mainTechnicalIndicatorTypes: ['MA', 'EMA', 'SAR'],
				// subTechnicalIndicatorTypes: ['VOL', 'MACD', 'KDJ'],				
				time: 1,
				More: false,
				id: 2,
				oData: [], //一分数据
				that: [], //分时
				kdata: [], //日K
				sData: [], //60分
				tData: [], //30分
				fData: [], //15分
			}
		},
		onLoad(query) {
			this.instrumentId = query.id
			this.id=query.index
		},
		onShow() {
			// this.ws.onopen = function() {
			// 	已连接上
			// };
		},
		onHide() {
			// this.ws.onclose = function(res) {
			// 	连接已关闭...
			// }
			// dispose('technical-indicator-k-line')
			// dispose('k-line-chart')
		},
		mounted: function() {
			var that = [] //分时
			var kdata = [] //日K
			var sData = [] //60分
			var tData = [] //30分
			var fData = [] //15分
			var oData = [] //1分
			// getCurrentPages()[0].options //renderjs 真机下获取参数
			/* #ifdef APP-PLUS */
			this.instrumentId = getCurrentPages()[0].options.id
			this.id = getCurrentPages()[0].options.index
			/* #endif */
			// 
			// }
			//分时图
			this.chart = init('k-line-chart')
			// this.chart.setTechnicalIndicatorType('EMV')
			// this.chart.setTechnicalIndicatorParams('AVP',[30])
			// this.chart.setTechnicalIndicatorType('AVP') 
			this.chart.setStyleOptions({
				grid: {
					horizontal: {
						color: '#ededed'
					},
					vertical: {
						color: '#76808F'
					}
				},
				candle: {
					type: 'area',
					area: {
						lineSize: 1,
						lineColor: '#2196F3',
						value: 'close',
						fillColor: [{
							offset: 0,
							color: 'rgba(33, 150, 243, 0.01)'
						}, {
							offset: 1,
							color: 'rgba(33, 150, 243, 0.2)'
						}]
					},
					priceMark: {
						high: {
							color: '#76808F'
						},
						low: {
							color: '#76808F'
						}
					},
					tooltip: {
						text: '#76808F'
						// labels: ['开', '收', '高', '低'],
						// values: function (kLineData) {
						// 	return [
						// 		kLineData.open.toFixed(2),
						// 		kLineData.close.toFixed(2),
						// 		kLineData.high.toFixed(2),
						// 		kLineData.low.toFixed(2),
						// 	]
						// }
					}
				},
				technicalIndicator: {
					// tooltip: {
					// 	showName: false,
					// 	showParams: false,			
					// },
					tooltip: {
						showRule: 'always',
						showName: true,
						showParams: true,
						text: {
							size: 10,
							family: 'Helvetica Neue',
							weight: 'normal',
							color: '#D9D9D9',
							marginTop: 6,
							marginRight: 8,
							marginBottom: 0,
							marginLeft: 8
						}
					}
				},

				xAxis: {
					show: true,
					height: null,
					axisLine: {
						show: false,
						color: '#888888',
						size: 4
					},
					tickText: {
						show: true,
						color: '#D9D9D9',
						family: 'Helvetica Neue',
						weight: 'normal',
						size: 12,
						paddingTop: 3,
						paddingBottom: 6
					},
					tickLine: { //幅图时间
						show: true,
						size: 1,
						length: 1,
						color: '#888888'
					}
				},
				yAxis: {
					inside: true,
					width: 60,
					position: 'left',
					axisLine: {
						show: false,
						color: '#888888',
						size: 1
					},
					tickText: {
						show: true,
						color: '#D9D9D9',
						family: 'Helvetica Neue',
						weight: 'normal',
						size: 12,
						paddingLeft: 0,
						paddingRight: 0
					},
					tickLine: {
						show: true,
						size: 1,
						length: 3,
						color: '#888888'
					}
				},
				crosshair: {
					horizontal: {
						line: {
							color: '#DDDDDD'
						},
						text: {
							backgroundColor: '#686d76'
						}
					},
					vertical: {
						line: {
							color: '#DDDDDD'
						},
						text: {
							backgroundColor: '#686d76'
						}
					}
				}
			})
			// this.chart.setScrollEnabled(false)
			// 设置是否缩放
			// setZoomEnabled(enabled)			
			// 是否可以缩放
			// isZoomEnabled()
			// this.chart.isZoomEnabled(false)
			// 设置是否可以拖拽滚动
			// this.chart.setScrollEnabled(false)
			// 是否可以拖拽滚动
			// this.chart.isScrollEnabled(false)
			// this.chart.setOffsetRightSpace(5)
			this.chart.setDataSpace(1)

			// this.chart.resize()
			this.chart.createPane('technicalIndicator', {
				technicalIndicatorType: 'VOL',
				height: 100,
				dragEnabled: false
			})
			// this.chart.applyNewData(generatedKLineDataList())
			//日K
			this.kLineChart = init('technical-indicator-k-line') //初始化
			this.kLineChart.setStyleOptions(getThemeOptions())
			this.kLineChart.setDataSpace(5)
			this.kLineChart.addCustomTechnicalIndicator(emojiTechnicalIndicator) //自定义技术指标
			this.kLineChart.setTechnicalIndicatorType('MA')
			this.paneTag = this.kLineChart.createPane('technicalIndicator', {
				technicalIndicatorType: 'VOL',
				height: 90
			})
			this.paneTag = this.kLineChart.createPane('technicalIndicator', {
				technicalIndicatorType: 'MACD',
				height: 90
			})
			// this.kLineChart.applyNewData(generatedKLineDataList()) // 为图表添加数据			
			//60分
			this.sixkLineChart = init('technical-indicator-k-sixline') //初始化
			this.sixkLineChart.setStyleOptions(getThemeOptions())
			this.sixkLineChart.setDataSpace(5)
			this.sixkLineChart.addCustomTechnicalIndicator(emojiTechnicalIndicator) //自定义技术指标
			this.sixkLineChart.setTechnicalIndicatorType('MA')
			this.sixpaneTag = this.sixkLineChart.createPane('technicalIndicator', {
				technicalIndicatorType: 'VOL',
				height: 90
			})
			this.sixpaneTag = this.sixkLineChart.createPane('technicalIndicator', {
				technicalIndicatorType: 'MACD',
				height: 90
			})
			// this.sixkLineChart.applyNewData(generatedKLineDataList()) // 为图表添加数据			
			//30分
			this.thekLineChart = init('technical-indicator-k-threeline') //初始化
			this.thekLineChart.setStyleOptions(getThemeOptions())
			this.thekLineChart.setDataSpace(5)
			this.thekLineChart.addCustomTechnicalIndicator(emojiTechnicalIndicator) //自定义技术指标
			this.thekLineChart.setTechnicalIndicatorType('MA')
			this.thepaneTag = this.thekLineChart.createPane('technicalIndicator', {
				technicalIndicatorType: 'VOL',
				height: 90
			})
			this.thepaneTag = this.thekLineChart.createPane('technicalIndicator', {
				technicalIndicatorType: 'MACD',
				height: 90
			})
			// this.thekLineChart.applyNewData(generatedKLineDataList()) // 为图表添加数据			
			//15分
			this.fivekLineChart = init('technical-indicator-k-fiveline') //初始化
			this.fivekLineChart.setStyleOptions(getThemeOptions())
			this.fivekLineChart.setDataSpace(5)
			this.fivekLineChart.addCustomTechnicalIndicator(emojiTechnicalIndicator) //自定义技术指标
			this.fivekLineChart.setTechnicalIndicatorType('MA')
			this.fivepaneTag = this.fivekLineChart.createPane('technicalIndicator', {
				technicalIndicatorType: 'VOL',
				height: 90
			})
			this.fivepaneTag = this.fivekLineChart.createPane('technicalIndicator', {
				technicalIndicatorType: 'MACD',
				height: 90
			})
			// this.fivekLineChart.applyNewData(generatedKLineDataList()) // 为图表添加数据		
			// 1分
			const onekLineChart = init('technical-indicator-k-oneline') //初始化
			onekLineChart.setStyleOptions(getThemeOptions())
			onekLineChart.setDataSpace(5)
			onekLineChart.addCustomTechnicalIndicator(emojiTechnicalIndicator) //自定义技术指标
			onekLineChart.setTechnicalIndicatorType('MA')
			this.onepaneTag = onekLineChart.createPane('technicalIndicator', {
				technicalIndicatorType: 'VOL',
				height: 90
			})
			this.onepaneTag = onekLineChart.createPane('technicalIndicator', {
				technicalIndicatorType: 'MACD',
				height: 90
			})
			// const oneData = () => { //实时更新
			// 	setTimeout(() => {
			// 		const oneList = this.onekLineChart.getDataList()
			// 		const lastone = oneList[oneList.length - 1]
			// 		const newone = generatedKLineDataList(lastone.timestamp, lastone.close, 1)[0]
			// 		newone.timestamp += 60 * 1000
			// 		this.onekLineChart.updateData(newone)
			// 		oneData(this.onekLineChart)
			// 	}, 10000)
			// }
			// onekLineChart.applyNewData(oData) // 为图表添加数据			
			// oneData()
			// this.setconnectSocket()
			var thet = this	
			
			if ("WebSocket" in window) {		               
				// 打开一个 web socket192.168.43.133  47.102.157.67			change  more	{tag:动作，symbol:合约,duration:时间,length:请求长度,beforeLength:上次请求长度} SHFE.rb201286400
				// this.ws = new WebSocket('ws://192.168.1.3:9652/kline?symbol=' + this.instrumentId + '&duration=' + this.time +'&id='+this.id);
				this.ws = new WebSocket('wss://md.sou-liang.com/kline?symbol=' + this.instrumentId + '&duration=' +
					this.time + '&id=' + this.id);
				// this.ws = new WebSocket('ws://192.168.43.133:9652/ws/kline?symbol=SHFE.ag2102&duration=86400&id=12');
				this.ws.onopen = function() {
					// Web Socket 已连接上，使用 send() 方法发送数据
					// thet.ws.send(JSON.stringify({symbol:this.instrumentId,tag:this.tag,length:50,beforeLength:0}));
				};
				
				this.ws.onmessage = function(evt) {
					
					let data = JSON.parse(evt.data)
					let num = data.length
					
					if (thet.type == 0) {
						for (let i = 0; i < num; i++) {
							if (data[i].symbol == thet.instrumentId && data[i].duration == 60) {
								thet.that.push(data[i])
							}
						}
						// thet.Kdata=thet.that

						// thet.emitData()
						let kupdata = data[0]
						// console.log(kupdata)
						thet.chart.updateData(kupdata)
						if (num != 1) {
							thet.that.unshift()	
							thet.chart.applyNewData(thet.that)
						}
					} else if (thet.type == 1) {
						for (let i = 0; i < num; i++) {
							if (data[i].symbol == thet.instrumentId && data[i].duration == thet.time) {
								thet.kdata.push(data[i])
							}
						}
						// const kLineData = () => {//实时更新
						//   setTimeout(() => {						      
						thet.kLineChart.updateData(data[0])
						//     kLineData(thet.kLineChart)
						//   }, 1000)
						// }
						if (num != 1) {
							thet.kLineChart.applyNewData(thet.kdata) // 日K为图表添加数据
						}
						// kLineData()

					} else if (thet.type == 2) {
						if (num > 0) {
							thet.More = true
						} else {
							thet.More = false
						}
						if (thet.tag == 'change') {
							for (let i = 0; i < num; i++) {
								thet.sData.push(data[i])
							}
						} else {
							for (let i = 0; i < num; i++) {
								if (data[i].symbol == thet.instrumentId && data[i].duration == thet.time) {
									thet.sData.unshift(data[i])
								}
							}
						}
						// const sixData = () => { //实时更新
						// setTimeout(() => {					
						thet.sixkLineChart.updateData(data[0])
						// sixData(thet.sixkLineChart)
						// }, 10000)
						// }
						// thet.sixkLineChart.loadMore(timestamp => {		
						// 	thet.tag='more'
						// 	thet.beforeLength+=5
						//     setTimeout(() => {
						//         // const firstData = kLineChart.getDataList()[0]
						//     thet.sixkLineChart.applyMoreData(data[0],thet.More)
						// 	  }, 2000)
						// 	})
						if (num != 1) {
							thet.sixkLineChart.applyNewData(thet.sData, thet.More) // 60分为图表添加数据
						}

						// thet.sixkLineChart.clearData()						
						// const data=thet.sixkLineChart.getDataList()
						// thet.sixkLineChart.applyMoreData(that, more)
						// sixData()						
					} else if (thet.type == 3) {
						for (let i = 0; i < num; i++) {
							if (data[i].symbol == thet.instrumentId && data[i].duration == thet.time) {
								thet.tData.push(data[i])
							}
						}
						// const theData = () => { //实时更新
						// setTimeout(() => {
						thet.thekLineChart.updateData(data[0])
						// 		theData(thet.thekLineChart)
						// 	}, 10000)
						// }
						if (num != 1) {

							thet.thekLineChart.applyNewData(thet.tData) // 30分为图表添加数据			
						}
						// theData()

					} else if (thet.type == 4) {

						for (let i = 0; i < num; i++) {
							if (data[i].symbol == thet.instrumentId && data[i].duration == 900) {
								thet.fData.push(data[i])
							}
						}
						// const fiveData = () => { //实时更新
						// 	setTimeout(() => {
						thet.fivekLineChart.updateData(data[0])
						// 		theData(thet.fivekLineChart)
						// 	}, 10000)
						// }
						if (num != 1) {
							thet.fivekLineChart.applyNewData(thet.fData) // 15分为图表添加数据
						}

					} else {
						for (let i = 0; i < num; i++) {
							if (data[i].symbol == thet.instrumentId && data[i].duration == thet.time) {
								thet.oData.push(data[i])
							}
						}
						// const updateData = () => { //实时更新
						// 			setTimeout(() => {
						let updata = data[0]
						onekLineChart.updateData(updata)
						// 			updateData(onekLineChart)
						// 			}, 1000) 
						// 	}
						if (num != 1) {
							onekLineChart.applyNewData(thet.oData) // 1分为图表添加数据
							// 		updateData()
						}
					}
				};
				// const updateData = () => { //实时更新
				// 			setTimeout(() => {
				// 			// const dataList = onekLineChart.getDataList()
				// 			// const lastData = dataList[dataList.length - 1]
				// 			let updata=data[0]
				// 			onekLineChart.updateData(updata)
				// 			updateData(onekLineChart)
				// 			}, 1000)
				// 	}
				// onekLineChart.applyNewData(oData) // 1分为图表添加数据
				// updateData()
				this.ws.onclose = function(res) {
					// 关闭 websocket
					// 连接已关闭...
				}
			} else {
				// 浏览器不支持 WebSocket
			}
			// this.timestampToTime(1608901200000)
		},
		methods: {
			// 接收逻辑层发送的数据
			receiveMsg(newValue, oldValue, ownerVm, vm) {
				this.type = newValue
				if (this.type == 0) {
					this.that = []
					this.time = 1
					this.tag = 'change'
				} else if (this.type == 1) {
					this.time = 60 * 60 * 24
					this.tag = 'change'
					// this.ws.onopen()
					this.kdata = []
					this.ws.send(JSON.stringify({
						symbol: this.instrumentId,
						tag: this.tag,
						duration: this.time,
						length: 50,
						beforeLength: 0
					}));
					// this.ws.send(JSON.stringify({symbol:'SHFE.ag2102',tag:this.tag,duration:86400,length:50,beforeLength:0}));
				} else if (this.type == 2) {
					this.time = 3600
					this.tag = 'change'
					// this.ws.onopen()
					this.sData = []
					this.ws.send(JSON.stringify({
						symbol: this.instrumentId,
						tag: this.tag,
						duration: this.time,
						length: 5,
						beforeLength: 0
					}));
				} else if (this.type == 3) {
					this.time = 1800
					this.tag = 'change'
					// this.ws.onopen()
					this.tData = []
					this.ws.send(JSON.stringify({
						symbol: this.instrumentId,
						tag: this.tag,
						duration: this.time,
						length: 50,
						beforeLength: 0
					}));
				} else if (this.type == 4) {
					this.time = 900
					this.tag = 'change'
					// this.ws.onopen()
					this.fData = []
					this.ws.send(JSON.stringify({
						symbol: this.instrumentId,
						tag: this.tag,
						duration: this.time,
						length: 50,
						beforeLength: 0
					}));
				} else {
					this.tag = 'change'
					this.time = 60
					this.oData = []
					// this.ws.onopen()
					this.ws.send(JSON.stringify({
						symbol: this.instrumentId,
						tag: this.tag,
						duration: this.time,
						length: 50,
						beforeLength: 0
					}));
				}

			},

			// 发送数据到逻辑层
			emitData(e, ownerVm) {
				// 发送逻辑层数据
				ownerVm.callMethod('receiveRenderData', this.that)
			},
			getScollTop() {
				this.$nextTick(() => {
					let con = document.getElementById("uni-scroll-view-content"); // 获取对象
					setTimeout(() => {
						con.scrollTop = con.scrollHeight; // 滚动高度
					}, 1000);
				});
			},
			// timestampToTime (cjsj) {
			//         var date = new Date(cjsj) //时间戳为10位需*1000，时间戳为13位的话不需乘1000
			//         var Y = date.getFullYear() + '-'
			//         var M = (date.getMonth()+1 < 10 ? '0'+(date.getMonth()+1) : date.getMonth()+1) + '-'
			//         var D = date.getDate() + ' '
			//         var h = date.getHours() + ':'
			//         var m = date.getMinutes() + ':'
			//         var s = date.getSeconds()
			//         // return Y+M+D+h+m+s
			//         return ':'+s
			// },

		},
		destroyed: function() {
			this.ws.onclose = function(res) {
				// 连接已关闭...
			}
			// 	dispose('technical-indicator-k-line')
		}
	}
</script>
<style lang="scss" scoped>
	.content {
		height: 440px;
	}

	.k-line-chart1 {
		height: 440px;
	}

	.k-line-chart-container {
		display: flex;
		flex-direction: column;
		margin: 15px;
		border-radius: 2px;
		box-shadow: 0 2px 4px rgba(0, 0, 0, .3);
		/* background-color: #1f2126; */
		width: 100%;
		height: 440px;
		padding: 16px 6px 16px 16px;
		background-color: #fff;
	}

	.k-line-chart-title {
		margin: 0;
		color: #000;
		padding-bottom: 10px;
	}

	.k-line-chart-menu-container {
		display: flex;
		flex-direction: row;
		align-items: center;
		margin-top: 10px;
		font-size: 12px;
		color: #929AA5;
	}

	.k-line-chart-menu-container button {
		cursor: pointer;
		background-color: #2196F3;
		border-radius: 2px;
		margin-right: 8px;
		height: 24px;
		line-height: 26px;
		padding: 0 6px;
		font-size: 12px;
		color: #fff;
		border: none;
		outline: none;
	}

	page {
		background-color: #FFFFFF;
	}

	.flexd_cont {
		width: 100%;
		height: 44px;
		// background-color: #131623;
		color: #fff;
		font-size: 14px;
		position: fixed;
		bottom: 0;
		left: 0;
		display: flex;
		z-index: 9;
		justify-content: space-around;
		background-color: #f8f8f8;

		.cont_btn {
			width: 30%;
			height: 44px;
			text-align: center;
			// line-height: 5px;
			color: #000;
			border: none;
			display: flex;
			flex-direction: column;
			// justify-content: space-around;
			justify-content: center;
			align-items: center;

			.img {
				width: 14px;
				height: 14px;
			}

			.uni-button:after {
				border: none;
			}
		}
	}

	.uni-button:after {
		border: none;
	}

	.rank_detail {
		height: calc(100vh - var(--top-window-height));

		.top {
			padding-top: var(--status-bar-height);

			.nav_bar {
				padding: 0 20rpx;
				display: flex;
				justify-content: space-between;

				.nav_bar_left {
					width: 30%;
					color: #fff;
					display: flex;
					align-items: center;
				}
				
				.nav_bar_back {
					width: 16px;
					height: 20px;
					padding-top: 4px;
					transform: rotate(90deg);
				}

				.nav_bar_center {
					display: flex;
					align-items: center;
					justify-content: center;
					width: 40%;
					color: #fff;

					.rank_title {
						margin-left: 20rpx;

						.flag {
							width: 22rpx;
							height: 32rpx;
							border-radius: 3rpx;
							background-color: #faaf3c;
							font-size: 16rpx;
							text-align: center;
							color: #fff;
							line-height: 32rpx;
						}

						.name {
							font-size: 28rpx;
							color: #fff;
							margin-left: 5rpx;
						}
					}
				}

				.nav_bar_right {
					width: 30%;
					display: flex;
					align-items: center;
					justify-content: flex-end;
					color: #fff;
				}
			}

			.introduce {
				display: flex;
				justify-content: space-between;
				padding: 30rpx;
				margin-top: 20rpx;
				padding-bottom: 0rpx;

				.intro_left {
					width: 300rpx;

					.price {
						font-size: 36rpx;
						color: #fff;
					}

					.ratio {
						margin-top: 10rpx;
						font-size: 24rpx;
						color: #fff;
					}

					.pay_time {
						height: 30rpx;
						width: 260rpx;
						line-height: 30rpx;
						background: rgba(255, 255, 255, .2);
						font-size: 24rpx;
						margin-top: 20rpx;
						display: flex;

						.tt {
							display: inline-block;
							background: #eee;
							width: 120rpx;
							text-align: center;
						}

						.arrow {
							display: inline-block;
							border: transparent 16rpx solid;
							height: 0;
							width: 0;
							right: 0rpx;
							border-left: #eee 15rpx solid;
						}
					}
				}

				.intro_right {
					width: 300rpx;
					display: flex;
					flex-wrap: wrap;

					.item {
						width: 50%;
						justify-content: flex-start;

						.title {
							font-size: 24rpx;
							color: #ccc;
						}

						.price {
							font-size: 28rpx;
							color: #fff;
						}
					}
				}

			}

			.arrow_down {
				display: flex;
				justify-content: center;
				padding-bottom: 50rpx;
			}
		}

		.bottom {
			height: 1000rpx;
			position: relative;

			.k_line {
				height: 860rpx;
				display: flex;
				justify-content: center;
				align-items: center;
			}

			.pop {
				width: 100%;
				position: absolute;
				top: 0;
				z-index: 100;
				height: 100%;
				background: rgba(0, 0, 0, 0.25);

				.info_tt {
					height: 60rpx;
					width: 100%;
					line-height: 60rpx;
					background: #fff;
					display: flex;
					font-size: 24rpx;

					.info_item {
						width: 20%;
						text-align: center;
					}

					.up {
						color: #CB1D14;
					}

					.down {
						color: #00B34F;
					}
				}

				.deep {
					background: #eee;
					font-size: 26rpx;
				}
			}
		}
	}

	.qiun-charts {
		width: 750rpx;
		height: 500rpx;
		background-color: #FFFFFF;
	}

	.qiun-Areacharts {
		width: 100%;
	}

	.charts {
		width: 100%;
		height: 500rpx;
		background-color: #FFFFFF;
	}

	.qiun-textarea {
		height: 300rpx;
	}

	.chart_position {
		position: relative;
		height: 500px;
		overflow: hidden;

		.charts_content {
			width: 100%;
			position: absolute;
			top: 0;
			// left: 0;
			background-color: #FFFFFF;
		}

		.charts_content1 {
			width: 100%;
			position: absolute;
			top: 0;
			// left: -375px;
		}

		.charts_content2 {
			width: 100%;
			position: absolute;
			top: 0;
			// left: -375px;
		}

		.charts_content3 {
			width: 100%;
			position: absolute;
			top: 0;
		}

		.charts_content4 {
			width: 100%;
			position: absolute;
			top: 0;
		}

		.charts_content5 {
			width: 100%;
			position: absolute;
			top: 0;
		}
	}

	.titleClass {
		width: 100%;
		font-size: 6rpx;
		padding: 10rpx;
		background-color: #FFFFFF;
	}

	.wrap_view {
		width: 100%;
		height: calc(100% - 44px);

		.wrap_left {
			float: left;
			width: 100%;

			.wrap_top {
				width: 100%;
			}

			.wrap_bottom {
				width: 100%;
			}
		}

		.wrap-right {
			float: left;
			width: 30%;

			.scroll-view_H {
				height: 50vh;

			}

			.detail_class {
				width: 100%;
				height: 100rpx;
				display: flex;
				justify-content: center;
				align-items: center;

				.detail_flex {
					flex: 1;
					text-align: center;
				}

				.active {
					color: #0EA391;
				}
			}

			.sp-r {
				width: 100%;
				height: 60rpx;
				line-height: 100rpx;
				text-align: center;
				font-size: 12rpx;
				display: flex;
			}

			.sp-grid {
				flex: 1;
				justify-content: center;
				overflow: hidden;
				width: 150rpx;
				white-space: nowrap
			}

			.point_data {
				color: #19BE6B;
			}
		}
	}
</style>
